<template>
  <el-divider
    v-if="
      props.columnButton.divider &&
      (props.columnButton.iif ? props.columnButton.iif(scope.row) : true)
    "
    v-acl="props.columnButton.acl"
    :border-style="props.columnButton.divider || 'none'"
    direction="vertical"
  />
  <template
    v-if="props.columnButton.iif ? props.columnButton.iif(scope.row) : true"
  >
    <el-popconfirm
      v-if="props.columnButton.type === 'del' || props.columnButton.pop"
      :width="200"
      :title="
        props.columnButton.pop
          ? props.columnButton.tooltip
          : '是否确认删除当前列？'
      "
      :hideAfter="0"
      :confirm-button-type="
        props.columnButton.type === 'del' ? 'danger' : 'primary'
      "
      @confirm="buttonClick(scope.row, scope.$index)"
    >
      <template #reference>
        <el-button
          link
          type="primary"
          v-acl="props.columnButton.acl"
          :style="{
            color: props.columnButton.color ?? 'var(--el-color-primary)'
          }"
          ><component :is="useRenderIcon(toRaw(props.columnButton.icon))" />{{
            props.columnButton.text
          }}</el-button
        >
      </template>
    </el-popconfirm>
    <el-button
      link
      v-else
      type="primary"
      v-acl="props.columnButton.acl"
      @click="buttonClick(scope.row, scope.$index)"
      ><component :is="useRenderIcon(toRaw(props.columnButton.icon))" />{{
        props.columnButton.text
      }}</el-button
    >
  </template>
</template>

<script lang="ts" setup name="lc-st-button">
import { inject, toRaw } from "vue";
import { useRenderIcon } from "../../icon/src/hooks";
import { NzSafeAny } from "../../sf/type";
import {
  ITableColumn,
  ITableColumnButton,
  STExposeComponent
} from "../interface";
import { acl } from "@/directives/index";
defineOptions({
  directives: { acl }
});
const props = defineProps<{
  scope: NzSafeAny;
  columnButton: ITableColumnButton;
}>();
const st = inject<STExposeComponent>("st-intence");
const buttonClick = (c: ITableColumn, i: number) => {
  if (props.columnButton?.click) {
    props.columnButton.click(c, st, i);
  }
};
</script>

<style></style>
../../icon/src/hooks ../interface ../../sf/types ../interface
